<template>
  <div>
    <div class="w-100 p-3 border-bottom">简历修改</div>
    <div>
      <div class="hb_changewd w-50 m-auto mt-5 text-center">
        <!-- 真实姓名 -->
        <div class="demo-input-suffix d-flex mt-3">
          <div class="h5 w-50 text-end">真实姓名：</div>

          <el-input placeholder="请输入您的真实姓名" v-model="input1">
          </el-input>
        </div>
        <!-- 身份证号-->
        <div class="demo-input-suffix d-flex mt-3">
          <div class="h5 w-50 text-end">身份证号：</div>

          <el-input placeholder="请输入您的身份证号" v-model="input2">
          </el-input>
        </div>

        <!-- 手机号 -->
        <div class="demo-input-suffix d-flex mt-3">
          <div class="h5 w-50 text-end">手机号码：</div>

          <el-input placeholder="请输入您的手机号码" v-model="input3">
          </el-input>
        </div>
        <!-- 性别 -->
        <div class="d-flex mt-3">
          <div class="h5 hb_zdy_oldpwd text-end pe-3">性别:</div>
          <div>
            <el-radio-group v-model="radio">
              <el-radio :label="1" @dbclick.native="changeSex(1)">男</el-radio>
              <el-radio :label="0" @dbclick.native="changeSex(2)">女</el-radio>
            </el-radio-group>
          </div>
        </div>
        <!-- 出生日期 -->
        <div class="w-75 d-flex my-3">
          <div class="h5 w-50 text-end">出生日期：</div>

          <el-date-picker
            v-model="value1"
            type="date"
            placeholder="选择日期"
            value-format="timestamp"
          >
          </el-date-picker>
        </div>
        <!-- 选择现在的身份 下拉框-->
        <div class="demo-input-suffix d-flex">
          <div class="h5 hb_zdy_oldpwd w-50 text-end">您现在的身份：</div>

          <el-select v-model="value" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
              >{{ item.label }}
            </el-option>
          </el-select>
        </div>
        <!-- 所在地址 -->
        <div class="block d-flex my-3">
          <span class="demonstration h5 hb_zdy_oldpwd w-50 text-end"
            >选择您的地址：</span
          >
          <el-cascader
            v-model="value3"
            :options="add"
            @change="handleChange"
          ></el-cascader>
        </div>
        <!-- 详细地址 -->
        <div class="demo-input-suffix d-flex mt-3">
          <div class="h5 w-50 text-end">详细地址：</div>
          <el-input
            type="textarea"
            :rows="4"
            placeholder="请输入内容"
            v-model="adddetail"
          >
          </el-input>
        </div>

        <!-- 目前学历  下拉框-->
        <div class="demo-input-suffix d-flex my-3">
          <div class="h5 hb_zdy_oldpwd w-50 text-end">目前学历：</div>

          <el-select v-model="values" placeholder="请选择">
            <el-option
              v-for="item in schools"
              :key="item.values"
              :label="item.label1"
              :value="item.values"
              >{{ item.label1 }}
            </el-option>
          </el-select>
        </div>
        <!-- 专业 -->
        <div class="demo-input-suffix d-flex mt-3">
          <div class="h5 w-50 text-end">专业：</div>

          <el-input placeholder="请输入您的专业" v-model="input5"> </el-input>
        </div>
        <!-- 教学年限 -->
        <div class="demo-input-suffix d-flex mt-3">
          <div class="h5 w-50 text-end">教学年限：</div>

          <el-input v-model="input6"> </el-input>
        </div>
        <!-- 自我介绍 -->
        <div class="demo-input-suffix d-flex mt-3">
          <div class="h5 w-50 text-end">自我介绍：</div>
          <el-input
            type="textarea"
            :rows="4"
            placeholder="请输入内容"
            v-model="textarea"
          >
          </el-input>
        </div>
        <!-- 上传视频 -->
        <!-- <div class="demo-input-suffix d-flex mt-3">
          <div class="h5 hb_zdy_oldpwd w-50 text-end pe-3">上传视频:</div>
          <div>
            <el-upload
              action="https://jsonplaceholder.typicode.com/posts/"
              list-type="picture-card"
              :on-preview="handlePictureCardPreview"
              :on-remove="handleRemove"
            >
              <i class="el-icon-plus"></i>
            </el-upload>
            <el-dialog :visible.sync="dialogVisible">
              <img width="100%" :src="dialogImageUrl" alt="" />
            </el-dialog>
          </div>
        </div>-->
        <!-- 上传照片 -->
        <!--<div class="demo-input-suffix d-flex mt-3">
          <div class="h5 hb_zdy_oldpwd w-50 text-end pe-3">上传照片:</div>
          <div>
            <el-upload
              action="https://jsonplaceholder.typicode.com/posts/"
              list-type="picture-card"
              :on-preview="handlePictureCardPreview"
              :on-remove="handleRemove"
            >
              <i class="el-icon-plus"></i>
            </el-upload>
            <el-dialog :visible.sync="dialogVisible">
              <img width="100%" :src="dialogImageUrl" alt="" />
            </el-dialog>
          </div>
        </div> -->
        <!-- 辅导方式 -->
        <div class="p-3 text-center">
          <span>辅导方式</span>
          <el-checkbox-group v-model="checkWay">
            <div style="margin: 15px 0"></div>
            <el-checkbox-group
              v-model="checkedCities"
              @change="handleCheckedCitiesChange"
            >
              <el-checkbox v-for="city in cities" :label="city" :key="city">{{
                city
              }}</el-checkbox>
            </el-checkbox-group>
          </el-checkbox-group>
        </div>

        <!-- 是否免费试听 -->
        <div class="d-flex mt-3">
          <div class="h5 hb_zdy_oldpwd text-end pe-3">是否免费试听:</div>
          <div>
            <el-radio-group v-model="radio1">
              <el-radio :label="3" @dbclick.native="changeSex(4)"
                >免费试听</el-radio
              >
              <el-radio :label="6" @dbclick.native="changeSex(5)"
                >不试听</el-radio
              >
            </el-radio-group>
          </div>
        </div>
        <span
          class="
            d-block
            bg-info
            w-25
            m-auto
            mt-4
            fs-4
            text-center
            rounded-3
            text-white
          "
          @click="showDetalite"
          >确定</span
        >
        <div>{{ value3 }}</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      checkAll: false,
      checkedCities: [],
      cities: ["线上辅导", "线下辅导", "大学生家教"],
      isIndeterminate: true,
      checked: true,
      checkWay: "",
      adddetail: "",
      value3: "",
      add: [
        {
          value: "北京",
          label: "北京",
          children: [
            {
              value: "北京",
              label: "北京",
              children: [
                {
                  value: "朝阳",
                  label: "朝阳",
                },
                {
                  value: "海淀",
                  label: "海淀",
                },
                {
                  value: "通州",
                  label: "通州",
                },
                {
                  value: "昌平",
                  label: "昌平",
                },
              ],
            },
            // {
            //   value: "daohang",
            //   label: "朝阳",
            //   children: [
            //     {
            //       value: "cexiangdaohang",
            //       label: "侧向导航",
            //     },
            //     {
            //       value: "dingbudaohang",
            //       label: "顶部导航",
            //     },
            //   ],
            // },
          ],
        },
        {
          value: "河南",
          label: "河南",
          children: [
            {
              value: "郑州",
              label: "郑州",
              children: [
                {
                  value: "金水区",
                  label: "金水区",
                },
                {
                  value: "二七区",
                  label: "二七区",
                },
              ],
            },
            {
              value: "漯河",
              label: "漯河",
              children: [
                {
                  value: "临颍",
                  label: "临颍",
                },
                {
                  value: "舞阳",
                  label: "舞阳",
                },
                {
                  value: "源汇区",
                  label: "源汇区",
                },
                {
                  value: "邵陵区",
                  label: "邵陵区",
                },
              ],
            },
          ],
        },
      ],

      checkedCities: [],
      textarea: "",
      value: "",
      values: "",
      value1: "",
      pushPwd: "",
      value2: "",
      schools: [
        { values: "1", label1: "本科" },
        { values: "2", label1: "研究生" },
        { values: "3", label1: "博士" },
        { values: "4", label1: "博士后" },
        { values: "5", label1: "其他" },
      ],
      input1: "",
      input2: "",
      input3: "",
      input4: "",
      input5: "",
      input6: "",
      options: [
        { value: "在校老师", label: "在校老师" },
        { value: "机构老师", label: "机构老师" },
        { value: "退休教师", label: "退休教师" },
        { value: "在校大学生", label: "在校大学生" },
      ],
      citys: [],
      radio: "",
      radio1: "",
      dialogImageUrl: "",
      dialogVisible: false,
      fileList: [
        {
          name: "food.jpeg",
          url: "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100",
        },
        {
          name: "food2.jpeg",
          url: "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100",
        },
      ],
    };
  },
  methods: {
    showDetalite() {
      let ttruename = this.input1; //真实姓名
      let tsex = this.radio; //性别
      let tage = this.value1; //出生时间戳
      let online = this.checkedCities; //是否线上
      let taddress_pro = this.value3[0];
      let taddress_city = this.value3[1];
      let taddress_county = this.value3[2];
      let taddress_detailed = this.adddetail;
      let tthesie = this.values;
      let toffice = this.textarea;
      let ta_sid = 2;
      let url = `teacher/upload`;
      let parmary = `ttruename=${ttruename}&tsex=${tsex}&tage=${tage}&online=${online}&taddress_pro=${taddress_pro}&taddress_city=${taddress_city}&taddress_county=${taddress_county}&taddress_detailed=${taddress_detailed}&tthesie=${tthesie}&toffice=${toffice}&ta_sid=${ta_sid}`;
      this.axios.post(url, parmary).then((res) => {
        if (res.data.code == 200) {
          alert("资料上传成功");
        } else {
          alert("资料上传失败");
        }
      });
    },
    handleCheckedCitiesChange(value) {
      let checkedCount = value.length;
      this.checkAll = checkedCount === this.cities.length;
      this.isIndeterminate =
        checkedCount > 0 && checkedCount < this.cities.length;
    },
    handleChange(value) {
      console.log(value);
    },
  },
};
</script>

<style lang="scss" scoped>
.el-input__inner {
  width: 300px;
}
.hb_zdy_oldpwd {
  width: 176px !important;
}
.el-input {
  text-align: left !important;
}
</style>